<template>
	<view id="students">			
		<view class="top-warp">
			<view v-for="(tab, i) in newsCategoryList" :key="i" :class="{'active':curIndex===i}" @click="changeTab(i)">{{tab.category_name}}</view>
		</view>
		
		<swiper class="swiper" :current="curIndex" @change="swiperChange">
			<!--全部 -->
			<swiper-item v-for="item in newsCategoryList" :key="item.category">
				<mescroll-item :i="item.category" :index="curIndex"></mescroll-item>
			</swiper-item>
		</swiper>
		
	</view>
</template>
 
<script> 
	import MescrollItem from "./mescroll-swiper-item.vue";
	import {mapState} from 'vuex'
	
	export default {
		components: { 
			MescrollItem
		},
		data() {
			return {
				curIndex: 0 // 当前tab的下标
			};
		},
		onLoad() {
			uni.showNavigationBarLoading()
			
			this.getNewsCategory()
		},
		methods:{
			// 轮播菜单
			swiperChange(e){
				this.changeTab(e.detail.current)
			},
			// 切换菜单
			changeTab(i){
				this.curIndex = i
			},
			// 新闻分类
			async getNewsCategory(){
				// 新闻分类
				let res = await this.$api.newsCategory()
				if(res.statusCode === 200){
					uni.hideNavigationBarLoading()
					
					console.log('新闻分类', res.data.data)
					
					res.data.data.unshift({category_name: '全部', category: 0})
					this.$store.dispatch('sendNewsCategory', res.data.data)
				}
			}
		},
		computed: {
			...mapState(['newsCategoryList'])
		}
	}
</script>

<style>
	page, #students, .swiper{
		height: 100%;
	}
	.top-warp{
		z-index: 9990;
		position: fixed;
		top: --window-top; /* css变量 */
		left: 0;
		width: 100%;
		height: 92upx;
		background-color: #fff;
		text-align: center;
		display: flex;
		color: #000;
		box-shadow:0px 2px 10px rgba(0,0,0,0.05);
	}
	.top-warp view{
		line-height: 92upx;
		font-size: 30upx;
		flex: 1;
	}
	.top-warp .active{
		border-bottom: 8upx solid #D8B36B;
		color: #D8B36B;
		font-weight: bold;
	}
</style>
	
 